
<template>
  <!-- 考勤管理-每月考勤提交 -->
  <div style="width:100%;">
    <el-row :gutter="10" style="margin-top:0.1rem;">
      <el-col :span="4">
        <el-select style="width:100%;" v-model="searchParam.year"></el-select>
      </el-col>
      <el-col :span="4">
        <el-select placeholder="所有班级" style="width:100%;" v-model="searchParam.date"></el-select>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="搜索 学员姓名" v-model="searchParam.ketword"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button>搜索</el-button>
      </el-col>
      <el-col :span="10" style="text-align:right;">
        <el-button @click="importPopup.visible=true">提交考勤</el-button>
      </el-col>
    </el-row>
    <table class="table" cellspacing="0" style="width: 100%;margin-top:0.1rem;">
      <thead class="thead">
        <tr>
          <td style="width:0.3rem"></td>
          <td style="width:0.8rem">学员姓名</td>
          <td v-for="n in monthDays" :key="n.day" class="signItem">{{n.day}}</td>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr v-for="(item,index) in tableList" :key="index">
          <td>
            <el-checkbox v-model="item.checked"></el-checkbox>
          </td>
          <td>{{item.studentName}}</td>
          <td v-for="n in item.monthDays" :key="n.day" class="signItem" :isEdite="n.isEdite">
            <i v-if="n.signMode==1" class="el-icon-success"></i>
            <i v-else-if="n.signMode==2" class="el-icon-warning-outline"></i>
            <i v-else-if="n.signMode==3" class="el-icon-circle-close"></i>
            <i v-else-if="n.signMode==4" class="el-icon-circle-close"></i>
            <i v-else-if="n.signMode==5" class="el-icon-circle-close"></i>
          </td>
        </tr>
      </tbody>
    </table>
    <el-row>
      <el-col :span="3" style="padding-top: 0.15rem;padding-left: 0.1rem;">
        <el-checkbox v-model="checkAll"></el-checkbox>
        <el-button @click="visibleSignBatchPopup(true)">提交考勤</el-button>
      </el-col>
      <el-col :span="8" style="padding-top: 0.05rem;display: flex;justify-content: space-around;">
        <p><i class="el-icon-success"></i>签到</p>
        <p><i class="el-icon-warning-outline"></i>请假</p>
        <p><i class="el-icon-circle-close"></i>旷课</p>
        <p><i class="el-icon-circle-close"></i>休假</p>
        <p><i class="el-icon-circle-close"></i>毕业/离园</p>
      </el-col>
      <el-col :span="13">
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchParam.currPage"
          @size-change="pageSizeChange"
          @current-change="curPageChange"
          :total="searchParam.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let vm;
export default {
  components: {},
  data() {
    return {
      searchParam: {
        year: "",
        date: "",
        keywords: "",
        currPage: 1,
        total: 0
      },
      monthDays:28,
      tableList: [],
      checkAll: false
    };
  },
  methods: {
    campusChange: function(campusId) {
      //校区改变
    },
    init() {
      this.monthDays=this.getDayList();
      for(let i=0;i<6;i++){
        this.tableList.push({
          studentName:i+1,
          monthDays:this.getDayList()
        });
      }
    },
    getDayList(time=new Date()){
      let now=new Date();
      let curDay=now.getDate();
      let monthspan=tool.TimeSpan(now,time);
      time.setMonth(time.getMonth()+1,0);
      let max=time.getDate();
      let list=[];
      if(monthspan>0)
        for(let i=1;i<=max;i++){
          list.push({
            day:i,
            signMode:parseInt(Math.random()*4+1),
            isEdite:0
          })
        }
      else{
        for(let i=1;i<=max;i++){
          list.push({
            day:i,
            signMode:parseInt(Math.random()*4+1),
            isEdite:curDay>=i?1:0
          })
        }
      }
      return list;
    },
    pageSizeChange(val) {
      this.searchParam.pageSize = val;
      this.search(1);
    },
    curPageChange(val) {
      this.search(val);
    },
    search(pIndex) {
      this.searchParam.currPage = pIndex || this.searchParam.currPage;
    },

  },
  mounted() {
    this.init();
  },
  computed: {},
  watch: {}
};
</script>

<style lang="scss" scoped>
.table {
	border-top: 0.01rem solid #ededed;
	border-bottom: 0.01rem solid #ededed;
}
.table td {
	letter-spacing: 0.01rem;
	text-align: center;
	line-height: 0.26rem;
	padding: 0.05rem;
  color: #666666;
  
  border: 0.01rem solid #ededed;
}

.thead td{
	font-weight: bold;
	font-size: 0.15rem;
	height: 0.5rem;
}
.tbody td {
	font-size: 0.16rem;
	height: 0.52rem;
}
.tbody tr:nth-child(odd) {
	background-color: #f7f9fc7a;
}
.signItem{
  width:0.44rem;
  i{
    font-size:0.25rem;
  }
  
}
.signItem[isEdite='0']{
  cursor: not-allowed;
}
.signItem[isEdite='1']{
  cursor: pointer;
}
</style>
